import { useEffect } from "react";
import { useState } from "react";
import axios from "axios";

function Counter(props) {
    const [count, setCount] = useState(() => {
        return props.num ** 2
    })

    return (
        <button onClick={() => setCount(count + 1)}>{count}</button>
    )
}

function App() {
    const [name, setName] = useState(() => {
        return '阿炜'
    })

    const [list, setList] = useState([])

    useEffect(() => {
        async function fetchData() {
            let arr = await axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get')
            setList(arr.data.data);
        }
        fetchData()
    }, [])  // [] 空数组 只执行一次(哪怕整个App函数重新执行，useEffect也不会执行)

    return (
        <div>
            <h1>hello {name}</h1>
            <Counter num={10}></Counter>

            <ul>{
                list.map(item => <li key={item.songsCount}>{item.name}</li>)
            }</ul>
        </div>
    )
}

export default App;